// 含基准值折线图（1楼-ph值监控、2楼-生产数据监控、冷库温度监控）
import { useECharts } from '@/hooks/useECharts';
import { EChartsOption } from 'echarts/types/dist/shared.d.ts';
import { useEffect } from 'react';
// ts
import type { LineMonitorType } from './typing';

interface BarChartProps {
  monitorData: LineMonitorType.StateType;
}

export const LineChartBaseValue = ({ monitorData }: BarChartProps) => {
  const { chartRef: barRef, chartInstanceRef: barChart } = useECharts();
  const { xAxisData, seriesData } = monitorData;
  const chartName = seriesData[0] ? seriesData[0].name : '';
  seriesData.forEach((item:any,index)=>{
    let color='#2FB3FF'
    if(index==1){
      color='#1FE7E7'
    }
    if(index==2){
      color='#288DFF'
    }
    if(index==3){
      color='#6172FD'
    }
    if(index==4){
      color='#FFAA08'
    }
    if(index==5){
      color='#FA5151'
    }
    item.dataFom = {
      // name: 'PH值',
      type: 'line',
      smooth: true,
      showSymbol: false,
      name:item.name,
      lineStyle: {
        width: 1, // 设置线条宽度
      },
      itemStyle: {
        color: color,
      },
      data: item.data,
    }
  })
  let yData= seriesData.map((item:any)=>item.dataFom)
  // console.log(monitorData,'monitorData')
  // console.log(xAxisData,'22222')
  // console.log(seriesData,'11111')

  useEffect(() => {
    barChart.current?.setOption({
      
      grid: {
        left: '1%',
        right: '2%',
        bottom: '1%',
        top: '20%',
        containLabel: true,
      },
      legend: {
        left: 'left', // 图例居左
        // data: ['PH值'],
        textStyle: {
          width: 'auto', // 文本宽度自适应
          // overflow: 'truncate', // 超出部分截断
          // ellipsis: '...', // 超出部分显示省略号
          color: '#ffffff',
              fontSize: '.14rem',
        },
        itemWidth: 5, // 每个图例项的宽度
        // itemGap: 1, // 图例项之间的间距
            // itemWidth: 2,
            itemHeight: 5,
        
        // itemWidth: 7,
        // itemHeight: 7,
        // icon: 'circle',
        // itemStyle: {
        //   // color: '#697682',
        // },
        // textStyle: {
        //   color: '#697682',
        // },
      },
      tooltip: {
        trigger: 'axis', // 触发类型。
        backgroundColor: '#233346', // 背景色
        borderWidth: 0,
        // formatter: function (params:any) {
        //   let result = `${params[0].name}<br />`;
        //   params.forEach((item:any,index:number) => {
        //     // 根据 series.name 找到对应的 tooltipName
        //     const tooltipName = yData.find((d:any,indexs:number) => indexs === index).names;
        //     result += `${item.marker} ${tooltipName}: ${item.value||0}<br />`;
        //   });
        //   return result;
        // },
        axisPointer: {
          // 指示器类型。
          type: 'line',
          crossStyle: {
            color: '#fff', // 线的颜色。
          },
        },
        textStyle: {
          color: '#fff',
        },
      },
      xAxis: [
        {
          type: 'category',
          data: xAxisData,
          // boundaryGap: false, // false时从0刻度开始
          axisLine: {
            // 坐标轴轴线
            show: false,
          },
          axisTick: {
            // 坐标轴刻度
            show: false,
          },
          axisLabel: {
            // 坐标轴刻度标签的相关设置
            color: '#697682',
            fontSize: '.12rem',
            // rotate: 45, // 取值范围[-90, 90]
          },
          axisPointer: {
            type: 'shadow',
          },
        },
      ],
      yAxis: [
        {
          name: '',
          type: 'value',
          // min: 0, // 动态设置最小值
          // max: 16, // 动态设置最大值
          // interval: 20, 值之间的间距
          axisLabel: {
            color: '#697682',
            formatter: '{value}',
            fontSize: '.14rem',
            // margin: 10 // 坐标轴文字距离坐标轴的距离
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线。
            lineStyle: {
              type: 'dotted',
              color: ['rgba(130, 144, 157, 0.18)'],
            },
          },
        },
      ],
      series:yData,
    } as EChartsOption);
  }, [barChart, seriesData, xAxisData]);

  return <div style={{ height: '100%' }} ref={barRef}></div>;
};
